<template>
  <div class="about">
    <pre><h1>4564</h1></pre>
    <h3 >{{message}}vuepre <span v-text="num"></span></h3>
    <h3 v-pre>{{message}}vuepre<span v-text="num"></span></h3>
    <h3>{{message}}</h3>
    <h2>{{showPrice}}</h2>
    <h2>{{null}}</h2>
    <h2>{{false}}</h2>
    <h2>{{undefined}}</h2>
    <h1>{{100}}</h1>
    <h3>{{new Date()}}</h3>
    <h3>{{+new Date()}}</h3>
    <h3>{{typeof +new Date()}}</h3>
    <h3>{{100+1}}</h3>
    <h3>{{Math.random()}}</h3>
    <h3>{{Math.ceil(3.1)}}</h3>
    <h2 v-html="htmlStr">{{htmlStr}}</h2>
    <h3 v-text="'message:'+message"></h3>
    <h3 v-text="`message:${message}`"></h3>
    <h3>{{`message：${message}`}}</h3>
    <h3 :title="`这是我的title${message}`">title</h3>
    <a :href="`http://${href}`">baidu</a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num:100,
      message: 'hello vue',
      null: null,
      false: false,
      undefined: undefined,
      htmlStr: " <h3>我是text</h3>",
      href:'www.baidu.com'
    };
  },
  computed: {
     showPrice() {
      return this.message * 2;
    }
  },
};
</script>
